<template>
  <div class="meterage-manage-detail">
    <el-dialog width="40%" :visible.sync="formShow" @close="handleClickDeal('cancel')" v-dialog-drag class="image-progress-detail" append-to-body :modal-append-to-body="false" :close-on-click-modal="false">
      <span slot="title">
        <i class="iconfont icon-zhiliangguanli1"></i>
        <span>{{title}}</span>
      </span>
      <div class="WholeScroll" style="max-height: 550px; overflow: auto;padding: 0 15px;">
        <el-form :model="formBaseData" ref="formBaseData" :rules="formBaseRules">
          <el-row>
            <el-col :span="24">
              <el-form-item :label="`${title}时间`" :label-width="formlabelWidth">
                <el-date-picker v-model="formBaseData.date" type="date" style="width:100%;" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions" :disabled="detailType === 'check'">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item label="附件" :label-width="formlabelWidth">
                <cmsUploadFile :ref="fileSystem[title=='进场'?'two':'three'].compoName" :fileList="fileListArr" :detail-id="detailId" :fileSystem="fileSystem[title=='进场'?'two':'three']" :disabled="detailType === 'check'|| detailType === 'audit'" type="mul" info="支持上传 png/jpg/gif/doc/xlsx/ppt/pdf 文件" :detail-type="detailType" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <!--新建和编辑的暂存上报-->
        <template>
          <el-button size="small" type="primary" @click="handleClickDeal('submit', { flag: 1 })"><i class="iconfont icon-icon_save"></i> 确 定
          </el-button>
        </template>
        <el-button size="small" @click="handleClickDeal('cancel')"><i class="iconfont icon-icon_cancel"></i> 取 消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import project from '@/api/buss/project'
import combatCycle from '@/api/buss/combatCycle'
import entryExitRegistration from '@/api/buss/entryExitRegistration'
export default {
  name: `project-dep-detail`,
  props: {
    postDetail: {
      type: Object,
      default: {
        show: false,
        type: 'build',
        params: {}
      }
    }
  },
  watch: {
    postDetail(value) {
      // 显示详情弹窗
      this.formShow = value.show
      // 初始化窗口参数
      // 详情类型
      this.detailType = value.type
      this.title = value.typeName
      this.fileRef = (this.title=='进场'?'fileTwo':'fileThree')
      this.selectedIds = value.selectedIds
      // 详情id
      this.detailId = this.selectedIds.join(',')
      if (this.detailType !== 'build') {
        this.getDetail()
      } else {
      }

    }
  },
  data() {
    return {

      fileListArr: [],
      fileRef: 'fileTwo',
      fileSystem: {
        'two': {
          sys: 'buss',
          module: 'entryExitRegistration',
          part: 'two',
          compoName: 'fileTwo'
        },
        'three': {
          sys: 'buss',
          module: 'entryExitRegistration',
          part: 'three',
          compoName: 'fileThree'
        },
      },
      thisMonth: '',
      quarter: '',
      radio: '0',
      actionType: '',
      title: '进场',
      selectedIds: [],
      //  请求地址
      formShow: false, // 表单展示
      formlabelWidth: '140px', // 表单左侧标题宽度
      // 表单基本信息内容
      formBaseData: {
        dateType: '',
        selectedId: '',
        date: ''
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      // 表单基本信息验证
      formBaseRules: {
        projectId: [
          { required: true, message: '请选址' + '项目', trigger: 'blur' }
        ],
      },
      selectList: {
        projectList: []
      },
      isLoading: false,
      detailType: 'build', // 详情类型 build新建 check不可编辑查看 edit编辑
      detailId: '' // 当前详情的id
    }
  },
  methods: {
    getDetail() {
      combatCycle.getOne(this.detailId).then((res) => {
        if (res.code === 200) {
          let data = res.data
          // 表单信息
          this.formBaseData = JSON.parse(JSON.stringify(data))
          this.detailId = this.formBaseData.id

        } else {
          console.log('请求出现错误', res)
        }
      })
        .catch((res) => {
          console.log('请求出现错误', res)
        })
    },
    // 事件处理的api请求
    sealDealHttp(url, query, param, callback) {
      this.$httpPost(url + query, param)
        .then((res) => {
          if (res.code === 200) {
            if (callback) callback(res)
            // 重新获取数据
            setTimeout(() => {
              this.getList(true)
            }, 1000)
          } else {
            this.$messageError(res.message)
          }
        })
        .catch((res) => {
          console.log('请求出现错误', res)
          console.log(res)
        })
    },
    // 点击各个流程的按钮事件
    handleClickDeal(type, res) {
      console.log(type, res)
      switch (type) {
        // 取消，关闭窗口
        case 'cancel':
          // 重置表单验证
          this.detailId = ''
          this.detailBaseId = ''
          this.formBaseData = {
            combatCycle: '0',
            season: '',
            month: '',
            demoType: '4',
            projectId: ''
          }
          // 关闭弹窗
          this.formShow = false
          let lableA=this.fileSystem[this.title=='进场'?'two':'three'].compoName
          // console.log("lable=",lable)
          console.log("this.$refs=",this.$refs)
          this.$refs[lableA].cancelAll()
          break
        case 'submit':
          let flag = res.flag
          // 表单验证
          this.$refs['formBaseData'].validate((valid) => {
            if (valid) {
              // 再验证其他内容
              // 整理文件信息
              this.isLoading = true
              // 提交详情
              this.submitDetail(flag, () => {
                // 绑定文件到表单
                this.saveFiles()
                // this.$refs.cmsFileTables.bindAllFile(this.detailId)
                this.formShow = false
                this.isLoading = false
                // 传值给父组件刷新列表
                this.$emit('reloadList')
              })
            } else {
              this.isLoading = false
            }
          })
          break
      }
    },

    submitDetail(type, callback) {
      if (this.title == '进场') {
        this.formBaseData.dateType = 'in'
      } else {
        this.formBaseData.dateType = 'out'
      }
      this.formBaseData.selectedId = this.selectedIds.join(',')
      entryExitRegistration.editDate(this.formBaseData).then((res) => {
        if (res.code === 200) {
          this.$messageSuccess('登记成功')
          this.saveFiles()
          // this.detailId = !this.detailId ? res.data.id : this.detailId
          this.isLoading = false
          if (callback) callback()
        } else {
          this.isLoading = false
          // this.$messageError(res.data.message)
        }
      })
        .catch((res) => {
          console.log('请求出现错误', res)
          this.isLoading = false
          // this.$messageError(this.$route.name + '提交详情-请求失败')
        })
    },
    saveFiles() {
      for (let k in this.fileSystem) {
        let fileProp = this.fileSystem[k]
        if(this.$refs[fileProp.compoName]){
          this.$refs[fileProp.compoName].saveAll(this.detailId)
        }
      }
    },
  }
}
</script>

<style scoped lang="scss">
.meterage-manage-detail
  .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
  width: 255px;
}
</style>

